<?php
	 /* @var $this SiteController */

	 $this->pageTitle = Yii::app()->name;
?>

<?php
	 //$this->beginWidget('bootstrap.widgets.TbHeroUnit',array(
	 //'heading'=>'Welcome to '.CHtml::encode(Yii::app()->name),
//)); 
?>

<!-- <p>Congratulations! You have successfully created your Yii application.</p>

<?php //$this->endWidget();  ?>

<p>You may change the content of this page by modifying the following two files:</p>

<ul>
    <li>View file: <code><?php //echo __FILE__;   ?></code></li>
    <li>Layout file: <code><?php //echo $this->getLayoutFile('main');   ?></code></li>
</ul>

<p>For more details on how to further develop this application, please read
    the <a href="http://www.yiiframework.com/doc/">documentation</a>.
    Feel free to ask in the <a href="http://www.yiiframework.com/forum/">forum</a>,
    should you have any questions.</p> -->




<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3xYyrj4ARm7I8UnoqfJM2H0qR5hdigac&sensor=true"></script>
<script type="text/javascript">
	var map;
	var setMapPosition = new google.maps.LatLng(-5.482482, 107.9775893);
	var jakarta = new google.maps.LatLng(-6.2297465, 106.829518);
	var bandung = new google.maps.LatLng(-6.9033101, 107.642621);
	var pondokindah = new google.maps.LatLng(-6.2703015, 106.7822402);
	var sunter = new google.maps.LatLng(-6.1371245, 106.863379);

	function initialize() {
		var mapOptions = {
			zoom: 6,
			center: setMapPosition
			//center: new google.maps.LatLng(-5.482482, 107.9775893),
			//mapTypeId: google.maps.MapTypeId.ROADMAP
		};

		map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

		var marker1 = new google.maps.Marker({
			//position: map.getCenter(),
			position: jakarta, 
			map:map,
			title: 'Cabang Jakarta'
		});

		var marker2 = new google.maps.Marker({
			//position: map.getCenter(),
			position: bandung, 
			map:map,
			title: 'Cabang Bandung'
		});

		var marker3 = new google.maps.Marker({
			//position: map.getCenter(),
			position: pondokindah, 
			map:map,
			title: 'CCTV PONDOK INDAH'
		});

		var marker4 = new google.maps.Marker({
			//position: map.getCenter(),
			position: sunter, 
			map:map,
			title: 'CCTV SUNTER'
		});

		marker3.setMap(null);
		marker4.setMap(null);

		google.maps.event.addListener(marker1, 'click', function(){
			// marker1.setMap(null);
			// marker2.setMap(null);
			// marker3.setMap(map);
			// marker4.setMap(map);
			map.setZoom(11);
			map.setCenter(marker1.getPosition());

		});

		google.maps.event.addListener(marker2, 'click', function(){
			map.setZoom(11);
			map.setCenter(marker2.getPosition());
		});

		google.maps.event.addListener(marker3, 'click', function(){
			$('#cctv_area').show();
			//map.setZoom(11);
			map.setCenter(marker3.getPosition());
			showCam();
		});

		google.maps.event.addListener(marker4, 'click', function(){
			$('#cctv_area').show();
			//map.setZoom(11);
			map.setCenter(marker4.getPosition());
			showCam();
		});

		google.maps.event.addListener(map, 'zoom_changed', function() {
			var zoomLevel = map.getZoom();
			if(zoomLevel < 11)
			{
				// alert(zoomLevel);
				marker1.setMap(map);
				marker2.setMap(map);
				marker3.setMap(null);
				marker4.setMap(null);
				$('#cctv_area').hide();
			}
			else
			{
				// alert(zoomLevel);
				marker1.setMap(null);
				marker2.setMap(null);
				marker3.setMap(map);
				marker4.setMap(map);
			}
			//map.setCenter(setMapPosition);
			//infowindow.setContent('Zoom: ' + zoomLevel);
		});

		/*google.maps.event.addListener(map, 'center_changed', function() {
			 // 3 seconds after the center of the map has changed, pan back to the
			 // marker.
			 window.setTimeout(function() {
				map.panTo(marker.getPosition());
			 }, 3000);
		  });*/
		//setInterval(tes, 5000); //start counting time
		//clearInterval(t); //stop counting time
	}

	function showCam(){
		/*var c = document.getElementById("Canvas1");
		var ctx=c.getContext("2d");
		var img = new Image();
		img.src = "images/031250769.JPG";
		img.onload = ctx.drawImage(img, 0, 0);*/
		
		//var c = [];
		//var ctx = [];
		//var img = [];
		/*for(var i=1; i<=2; i++)
		{
			c[i] = document.getElementById("Canvas"+i);
			ctx[i]=c[i].getContext("2d");
			img[i] = new Image();
			img[i].src = "images/mini"+i+".jpg";
			img[i].onload = ctx[i].drawImage(img[i], 0, 0);
			//alert(c[i]);
		}*/
	}

	function tes(){
		//alert('yak');
		/*var c = document.getElementById("Canvas1");
		var ctx=c.getContext("2d");
		var img = new Image();
		img.src = "D:/capture/031250769.JPG";
		img.onload = ctx.drawImage(img, 0, 0);*/
	}
		
	function cek() {
		$.ajax({
			url: "<?php echo Yii::app()->createUrl('/site/getFile'); ?>",
			cache: false,
			//dataType: "json",
			success: function(msg) {
				//alert(msg);
				var c = document.getElementById("Canvas1");
				var ctx=c.getContext("2d");
				var img = new Image();
				img.src = "images/KRISOPRAS/20140314/CAMERA01/"+msg;
				//img.src = "images/031250769.JPG";
				img.onload = ctx.drawImage(img, 0, 0);
				//alert(img.src);
				//document.write('<li><a href="4thparty/KIF_0'+i+'.jpg" onclick="return !window.open(this.href);"><img src="4thpartythumbs/KIF_0'+i+'.jpg" height="54" width="72" alt="'+i+'" title="'+i+'" /></li>');
		//		document.write('<li><a href="images/'+msg+'" onclick="return !window.open(this.href);"><img src="images/'+msg+'" height="100" width="120" alt="1" title="1" /></li>');
				//$('.test').html(msg);
			}
		})
		var waktu = setTimeout("cek()",100);
	}

	$(document).ready(function(){
		cek();
	});

	google.maps.event.addDomListener(window, 'load', initialize);
</script>

<body onload="initialize()">
	<table border="1">
		<tr>
			<td >
				<div id="map-canvas" style="width: 1170px; height: 500px; position: relative; border: 2px solid;"></div>
			</td>
		</tr>
		<tr>
			<td>
				<div id="cctv_area" style="display: none;">
					<h2 style="text-align: center;">Tampilan CCTV (live)</h2>
					<table border="1" align="center">
						<tr>
							<td>
								<canvas id="Canvas1" width="310" height="250" style="border:1px solid #c3c3c3;">
									Web Browser Anda tidak mendukung HTML 5
								</canvas>
							</td>
							<td>
								<canvas id="Canvas2" width="310" height="250" style="border:1px solid #c3c3c3;">
									Web Browser Anda tidak mendukung HTML 5
								</canvas>
							</td>
						</tr>
					</table>
				</div>
			</td>
		</tr>
	</table>
</body>
